import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "./Series"

Rectangle {
    id: mainWindow
    color: "#FFF"

    RowLayout {
        anchors.fill: parent

        // 左侧导航栏
        ListView {
            id: navList
            Layout.preferredWidth: 180
            Layout.fillHeight: true
            section.property: "category"
            section.criteria: ViewSection.FullString
            section.delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: "#F5F7FA"
                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: section
                    color: "#1296FF"
                    font.pointSize: 12
                    font.bold: true
                }
            }
            model: ListModel {
                ListElement { name: "数值坐标轴"; category: "坐标轴" }
                ListElement { name: "对数坐标轴"; category: "坐标轴" }
                ListElement { name: "日期坐标轴"; category: "坐标轴" }
                ListElement { name: "分类坐标轴"; category: "坐标轴" }
                ListElement { name: "柱形图分类坐标轴"; category: "坐标轴" }
                ListElement { name: "坐标轴共有属性"; category: "坐标轴" }

                ListElement { name: "Legend（图例）"; category: "ChartView" }
                ListElement { name: "ChartView主题"; category: "ChartView" }
                ListElement { name: "ChartView动画"; category: "ChartView" }

                ListElement { name: "折线图"; category: "XYSeries" }
                ListElement { name: "曲线图"; category: "XYSeries" }
                ListElement { name: "散点图"; category: "XYSeries" }
                ListElement { name: "折线图（基础属性）"; category: "XYSeries" }
                ListElement { name: "折线图（鼠标交互）"; category: "XYSeries" }

                ListElement { name: "极坐标图"; category: "极坐标" }
                ListElement { name: "雷达扫描效果"; category: "极坐标" }

                ListElement { name: "柱形图"; category: "BarSeries" }
                ListElement { name: "水平柱形图"; category: "BarSeries" }
                ListElement { name: "百分比柱形图"; category: "BarSeries" }
                ListElement { name: "水平百分比柱形图"; category: "BarSeries" }
                ListElement { name: "堆叠柱形图"; category: "BarSeries" }
                ListElement { name: "水平堆叠柱形图"; category: "BarSeries" }

                ListElement { name: "BarSeries 信号"; category: "柱形图信号" }
                ListElement { name: "BarSet 信号"; category: "柱形图信号" }

                ListElement { name: "饼图示例"; category: "饼图" }
                ListElement { name: "饼图交互"; category: "饼图" }

                ListElement { name: "面积图示例"; category: "面积图" }
                ListElement { name: "面积图交互"; category: "面积图" }

                ListElement { name: "箱线图"; category: "其它" }
                ListElement { name: "蜡烛图（K线图）"; category: "其它" }
                ListElement { name: "箱线图（离群值）"; category: "其它" }
                ListElement { name: "股价走势图"; category: "其它" }
            }

            delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: ListView.isCurrentItem ? "#BCE6FF": "#FFF"
                border.width: 0

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        parent.ListView.view.currentIndex = index
                        contentStack.currentIndex = index
                    }
                }

                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: name
                    color: "#333"
                    font.pointSize: 10.5
                    font.bold: true
                }
            }
        }

        // 右侧内容区
        StackLayout {
            id: contentStack
            Layout.fillWidth: true
            Layout.fillHeight: true

            // 这里按顺序放各个效果组件
            AxisValueDemo {}
            AxisLogValue {}
            AxisDateTime {}
            AxisCategory {}
            AxisBarCategory {}
            BaseAxis {}
            ChartLegend {}
            ChartTheme {}
            ChartAnimation {}

            // 基于XYSeries
            LineSeriesDemo {}
            SplineSeriesDemo {}
            ScatterSeriesDemo {}

            // XYSeries属性、交互
            LineSeriesDemo2 {}
            LineSeriesDemo3 {}

            // 极坐标图
            PolarChartViewDemo {}
            RadarChartDemo {}

            // 柱形图
            BarSeriesDemo {}
            HorizontalBarSeriesDemo {}
            PercentBarSeriesDemo {}
            HorizontalPercentBarSeriesDemo {}
            StackedBarSeriesDemo {}
            HorizontalStackedBarSeriesDemo {}

            // 柱形图信号
            BarSeriesDemo2 {}
            BarSeriesDemo3 {}

            // 饼图
            PieSeriesDemo {}
            PieSeriesDemo2 {}

            // 面积图
            AreaSeriesDemo {}
            AreaSeriesDemo2 {}

            // 其它
            BoxPlotSeriesDemo {}
            CandlestickSeriesDemo {}
            BoxPlotSeriesDemo2 {}
            CandlestickSeriesDemo2 {}
        }
    }
}
